<template>
  <div class="table">
    <vxe-table resizable :auto-resizable="true" :show-overflow="tooltip" showIcon="false" isColgroup="false"
      :show-header="false" row-class-name="rowHeight" :cell-class-name="cellClass" :data="tableData" align="center"
      :edit-config="{ trigger: 'click', mode: 'cell' }">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="title" :edit-render="{ autofocus: '.vxe-input--inner' }">
        <template #edit="{ row }">
          {{ row.title }}
        </template>
      </vxe-column>
      <vxe-column field="content " :edit-render="{}">
        <template #default="{ row }">
          {{ row.content }}
        </template>
        <template #edit="{ row }">
          <vxe-textarea :rows="6" @click="getFile" className="content" v-model="row.content" type="text" placeholder=""
            :disabled="isCourseContentEdit || row.content == '请下载课程附件'"></vxe-textarea>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>
<script>

export default {
  data() {
    return {
      tableData: [
        { title: '实践目标完成要求', content: '', },
        { title: '实践考核标准', content: '', },
        { title: '实践资料', content: '下载课程附件', },
      ],
    }
  },
  props: ['cid'],
  methods: {
    cellClass({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
      if (columnIndex == 2) {
        return 'courseContent'
      } else {
        return 'text'
      }
    }
  },
  mounted() {
    this.tableData[0].content = this.$props.courseCon[0]
    this.tableData[1].content = this.$props.courseCon[1]
  },
  props: ["isCourseContentEdit", "courseCon"],
  watch: {
    tableData: {
      handler: function (newVal) {
        let data = [];
        data.splice(0, 1, newVal[0].content)
        data.splice(1, 1, newVal[1].content)
        this.$emit('changeCourseContent', data)
      },
      deep: true
    },
    courseCon: {
      handler: function (newVal) {
        console.log(newVal);
        this.tableData[0].content = newVal[0]
        this.tableData[1].content = newVal[1]
      },
      deep: true
    },
    getFile() {
      fetch(http + '/admin/major/courses/appendix?cid=' + this.$props.cid, {
        method: 'post',
        headers: {
          "Token": userData.Token,
        },
        responseType: 'blob',
      }).then((response) => {
        return response.blob()
      }).then((data) => {
        console.log(data);
        if (data.code == 200) {
          console.log(data);
          // 创建一个 a 标签，并隐藏 a 标签
          let a = document.createElement("a");
          a.style.display = "none";
          // 对象 URL 绑定到 a 标签上
          a.href = window.URL.createObjectURL(new Blob([data]));
          // 给 a 标签添加 download 属性 与 文件名
          a.setAttribute("download", `课程附件${new Date().toLocaleString()}.xls`);
          // 把 a 标签挂载到 dom 树上并执行 a 标签的 click 事件
          document.body.appendChild(a);
          a.click();
          // 释放我们创建的 url 和 a 标签
          window.URL.revokeObjectURL(a.href);
          document.body.removeChild(a);
        } else {
          hint.value.errHandle('课程附件不存在')
        }
      }).catch((err) => {
        console.log(err);
        errHandle()
      })
    }
  },
}
</script>
<style scoped>
.table {
  width: 100%;
}

:deep .rowHeight {
  height: 120px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

:deep .rowHeight textarea {
  height: 60px;
  margin-top: -13px;
}

:deep .vxe-table--render-default {
  border: #707070 1px solid;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
<style>
.text,
.courseContent {
  background-color: #ffffff;
  border: solid 1px #8a8a8a;
  border-right: 0px;
  text-align: center;
  font-family: Source Han Sans CN;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 18px;
  letter-spacing: 0px;
  color: #707070;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.courseContent {
  text-align: left;
  font-size: 15px;
}

.vxe-cell .vxe-input>.vxe-input--inner,
.vxe-cell .vxe-textarea>.vxe-textarea--inner,
.vxe-table--filter-wrapper .vxe-input>.vxe-input--inner,
.vxe-table--filter-wrapper .vxe-textarea>.vxe-textarea--inner {
  height: 100%;
  border: #707070 !important;
}

.content {
  margin-top: 20px;
  margin-bottom: 14px;
  font-family: Source Han Sans CN;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 18px;
  letter-spacing: 0px;
  color: #707070;
}
.content:hover{
  opacity: 0.5;
}

.vxe-table--render-default .vxe-header--column.col--ellipsis:not(.col--actived)>.vxe-cell,
.vxe-table--render-default .vxe-body--column.col--ellipsis:not(.col--actived)>.vxe-cell,
.vxe-table--render-default .vxe-footer--column.col--ellipsis:not(.col--actived)>.vxe-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}
</style>